<template>
  <div>
      <table algin="center">
          <tr v-for="(i) in params" :key="i.id">
              <td v-if="i.type=='input'" >
                  <van-field :label="i.lable" v-model="datas[i.lable]"/>
              </td>
              <td v-if="i.type=='radio' || i.lable=='性别' ">
                <el-radio-group v-model="datas[i.lable]">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </td>
              <td v-if="i.type=='checkbox' ">
                  <el-checkbox v-model="datas[i.lable]" :value="i.lable">{{i.lable}}</el-checkbox>
              </td>             
              <td v-if="i.type=='select'">
                  <van-button @click="change">  选择审批人</van-button> <br><br>
                  {{i.lable}}<select v-model="datas[i.lable]">
                      <option :value="w.type" v-for=" w in i.values" :key="w.id">{{w.name}}</option>
                  </select>
              </td>
              <td v-if="i.type=='startdatetime'">
                    <el-date-picker
                    v-model="value1"
                    type="date"
                    value-format="YYYY-MM-DD"
                    :placeholder="i.lable">
                    </el-date-picker>
              </td>
               <td v-if="i.type=='outdatetime'">
                    <el-date-picker
                    v-model="value2"
                    type="date"
                    value-format="YYYY-MM-DD"
                    :placeholder="i.lable">
                    </el-date-picker>
              </td>
              <td v-if="i.type=='file'">
                 {{i.lable}} <van-uploader :after-read="uploader"/>
              </td>
          </tr>
      </table>

        <el-dialog v-model="dialogTableVisible" title="Shipping address">
                <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                :props="defaultProps"
                @check="handleNodeClick"
              />
              <van-button @click="dialogTable">关闭</van-button>
        </el-dialog>

      <van-button @click="add">提交</van-button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'apply_for3',
    data(){
        return{
            wid:this.$route.query.wid,
            eid:this.$route.query.eid,
            uid:localStorage.getItem('uid'),
            values:{},
            params:[],
            datas:{},
            value1:'',
            value2:'',
            pic:"1.jpg",
            dialogTableVisible:false,
            data:[],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            checkdvalues:[]
            
        }
    },
    methods:{
        dialogTable(){
            this.dialogTableVisible = false
        },
        // 展示弹出框
        change(){
            this.dialogTableVisible = true
        },
        getwork(){
            axios.get('/updateworkf?id='+this.wid).then(res=>{
                console.log(res);
                this.values = res.data.list 
                this.params = JSON.parse(res.data.list.params)

            })
        },
        getlableByType(type){
            let lable = ''
            for(var i=0;i<this.params.length;i++){
                if(this.params[i]['type']==type){
                    lable = this.params[i]['lable']
                }
            }
            return lable
        },
        add(){
            this.delexamine()
            if(this.pic){
                let lable = this.getlableByType('file')
                this.datas[lable] = this.pic
            }
            if(this.value1){
                let lable = this.getlableByType('startdatetime')
                this.datas[lable] = this.value1
            }
            if(this.value2){
                let lable = this.getlableByType('outdatetime')
                this.datas[lable] = this.value2
            }
            // console.log(this.datas);
            let name = document.getElementsByTagName('input')[0].value
            let title = name+this.values['name']
            let data = JSON.stringify(this.datas)
            axios.post('/examine',{'title':title,'params':data,'approver':this.checkdvalues,'workfid':this.wid,'userid':this.uid}).then(res=>{
                console.log(res);
                if(res.data.code == 200){
                    this.$router.push('/')
                }
            })
        },
        getcomanyuser(){
            axios.get('/getcomanyuser').then(res=>{
                console.log(res);
                this.data = res.data.list
            })
        },
        uploader(file) {
            alert(JSON.stringify(file) )

        //     let formData = new FormData()
        //     formData.append('file', file.file)
        //     axios({method: 'post',url: '/upload', data: formData}).then(res => {
        //             console.log(res)
        // })
        },
        handleNodeClick(val1,status){
            this.checkdvalues=[]
            let list = status['checkedNodes']
            for(var i=0;i<list.length;i++){
                if(list[i]['type'] == 3){
                    this.checkdvalues.push(list[i]['id'])
                }
           }
        //    console.log(this.checkdvalues);
        },
        getexamineoneM(){
            axios.get('/examineoneM?eid='+this.eid).then(res=>{
                console.log(res);
                this.datas = res.data.list.params
                this.value1 = res.data.list.params['开始时间']
                this.value2 = res.data.list.params['结束时间']
                this.checkdvalues = res.data.list.approver
                console.log(this.checkdvalues);
            })
        },
        delexamine(){
            axios.delete('/examine?eid='+this.eid).then(res=>{
                console.log(res);
            })
        }
        
    },
    mounted(){
        this.getwork();
        this.getcomanyuser();
        this.getexamineoneM();
    }
}
</script>

<style>

</style>